<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/zzsc.css">
    <link rel="stylesheet" type="text/css" href="dist/jquery.vm-carousel.css">
    <script src="js/modernizr.js"></script>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/featurn.css"/>
    <link rel="stylesheet" type="text/css" href="css/login.css"/>
    <link rel="stylesheet" type="text/css" href="css/animate.css"/>
    <title>特色推荐</title>



</head>
<style>
	  .vmc-centered{ padding: 10px 0; }
	  .vmc-centered img { transition: all 0.3s ease; }
	  .vmc-centered .vmc_active img { transform: scale(1.2); }
	
</style>



<body>
    <div class="main">
            <header>
                    <section><img src="img/logo.jpg"></section>
                    <nav class="btn_nav">
                            <span></span>
                            <span></span>
                            <span></span>
                    </nav>
                     <ul class="phone_nav">
                            <li><a href="index.html">主页</a></li>
                            <li><a href="featurn.html">特色推荐</a></li>
                            <li><a href="listen.html">随心听</a></li>
                            <li><a href="freedom.html">自由行</a></li>
                            <li><a href="aboutus.html">关于我们</a></li>
                             <li class="login_btn"><a>登录/注册</a></li>
                     </ul>   
            </header>
            <h1><img src="img/title.png"></h1>
            <article>
                    
                    <section>
                            <h1><img src="img/title.png"></h1>
                            <p><img src="img/content.png"></p>
                            <ul>
                                <li>
                                    <span>蚝<br>壳<br>墙</span>
                                    <div>
                                        <img src="img/ts1.png">
                                        <span>蚝壳墙</span>
                                    </div>
                                </li>
                                <li>
                                    <span>练<br>溪<br>驿<br>站</span>
                                    <div>
                                        <img src="img/ts2.png">
                                        <span>练溪驿站</span>
                                    </div>
                                </li>
                                <li>
                                    <span>自<br>酿<br>酒<br>坊</span>
                                    <div>
                                        <img src="img/ts3.png">
                                        <span>自酿酒坊</span>
                                    </div>
                                </li>
                                <li>
                                    <span>云<br>吞<br>面</span>
                                    <div>
                                        <img src="img/ts4.png">
                                        <span>云吞面</span>
                                    </div>
                                </li>
                                <li>
                                    <span>艇<br>仔<br>粥</span>
                                    <div>
                                        <img src="img/ts5.png">
                                        <span>艇仔粥</span>
                                    </div>
                                </li>
                            </ul>
                    </section>
                    <div class="container">
                            <ul class="vmcarousel-centered vmc-centered imgbox">
                                    <li><img src="img/11.jpg" alt=""></li>
                                    <li><img src="img/22.jpg" alt=""></li>
                                    <li><img src="img/33.jpg" alt=""></li>
                                    <li><img src="img/44.jpg" alt=""></li>
                                    <li><img src="img/55.jpg" alt=""></li>
                                    <li><img src="img/11.jpg" alt=""></li>
                            </ul>
                    </div>
            </article>
            <aside>
                    <p>趣怪粤俗老食语</p>
                    <div>
                            <span class="pre">
                                    <img src="img/pre.png">
                            </span>
                            <span class="nex">
                                <img src="img/next.png">
                            </span>
                    </div>
                    <ul class="ul_A">
                        <li>
                            <div><img src="img/ts11_03.jpg"></div>
                            <p>太公分猪肉</p>
                        </li>
                        <li>
                            <div><img src="img/ts22_05.jpg"></div>
                            <p>卖大包</p>
                        </li>
                        <li>
                            <div><img src="img/ts33_07.jpg"></div>
                            <p>失魂鱼</p>
                        </li>
                        <li>
                            <div><img src="img/ts44_09.jpg"></div>
                            <p>大石责死蟹</p>
                        </li>
                    </ul>
                    <ul class="ul_B">
                            <li>
                                <div><img src="img/tsA.png"></div>
                                <p>盲公食汤圆</p>
                            </li>
                            <li>
                                <div><img src="img/tsb.png"></div>
                                <p>食过夜粥</p>
                            </li>
                            <li>
                                <div><img src="img/tsc.png"></div>
                                <p>通笼煎堆</p>
                            </li>
                            <li>
                                <div><img src="img/tsd.png"></div>
                                <p>饮头啖汤</p>
                            </li>
                    </ul>
            </aside>
            <div class="foot_box">
                    <p>趣怪粤俗老食语</p>
                    <ul class="ul_A2">
                            <li>
                                <div><img src="img/ts11_03.jpg"></div>
                                <p>太公分猪肉</p>
                            </li>
                            <li>
                                <div><img src="img/ts22_05.jpg"></div>
                                <p>卖大包</p>
                            </li>
                            <li>
                                <div><img src="img/ts33_07.jpg"></div>
                                <p>失魂鱼</p>
                            </li>
                        </ul>
                        <ul class="ul_B2">
                                <li>
                                    <div><img src="img/tsA.png"></div>
                                    <p>盲公食汤圆</p>
                                </li>
                                <li>
                                    <div><img src="img/tsb.png"></div>
                                    <p>食过夜粥</p>
                                </li>
                                <li>
                                    <div><img src="img/tsc.png"></div>
                                    <p>通笼煎堆</p>
                                </li>
                        </ul>
                        <div>
                                <span class="pre2">
                                        <img src="img/pre.png">
                                </span>
                                <span class="nex2">
                                    <img src="img/next.png">
                                </span>
                        </div>
            </div>
            <p>岭南印象园APP   联系电话：400-511-3420</p>
    </div>
    <!--login-->
<article class="login">
        <section>
                <article class="logo">
                        <img src="img/bigLogo.png">
                </article>
        </section>
        <aside>
            <div class="btn">
                    <span class="dlbtn">登录</span><span class="zcbtn">注册</span>
            </div>
            <form class="login_form">
                    <input type="type" placeholder="用户名"/>
                    <input type="type" placeholder="密码"/>
                    <span>忘记密码？</span>
                    <button>登录</button>
            </form>
            <form class="register">
                    <input type="type" placeholder="用户名"/>
                    <input type="type" placeholder="密码"/>
                    <input type="type" placeholder="密码"/>
                    <button>注册</button>
            </form>
            <ul>
                <li><img src="img/qq.png"></li>
                <li><img src="img/wechat.png"></li>
                <li><img src="img/weibo.png"></li>
            </ul>

             <span class="close"><img src="img/close.png"></span>   
        </aside>
</article><!--login-->


  
</body>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
<script src="dist/jquery.vm-carousel.js"></script>
<script src="js/response.js"></script>
<script src="js/nav.js"></script>
<script>
    	jQuery(function($){
		  $('.vmcarousel-centered').vmcarousel({
			 centered: true,
			 start_item: 2,
			 autoplay: false,
			 infinite: false
		  });

		  $('.vmcarousel-centered-infitine').vmcarousel({
			 centered: true,
			 start_item: 1,
			 autoplay: false,
			 infinite: true
		  });

		  $('.vmcarousel-normal').vmcarousel({
			 centered: false,
			 start_item: 0,
			 autoplay: false,
			 infinite: false
		  });
	   });
        var ul_A = document.querySelector(".ul_A");
        var ul_B = document.querySelector(".ul_B");
        var pre  = document.querySelector(".pre");
        var next = document.querySelector(".nex");
        console.log(pre);
        pre.addEventListener("click",function(){
            ul_B.style.display = "none";
            ul_A.style.display = "flex";
            console.log(1);
        })
        next.addEventListener("click",function(){
            ul_B.style.display = "flex";
            ul_A.style.display = "none";
        })

        var ul_A2 = document.querySelector(".ul_A2");
        var ul_B2 = document.querySelector(".ul_B2");
        var pre2  = document.querySelector(".pre2");
        var next2 = document.querySelector(".nex2");
        console.log(ul_A2);
        pre2.addEventListener("click",function(){
            ul_B2.style.display = "none";
            ul_A2.style.display = "flex";
            console.log(1);
        })
        next2.addEventListener("click",function(){
            ul_B2.style.display = "flex";
            ul_A2.style.display = "none";
        })

</script>
</html>